<template>
  <view class="vk-data-input-number-box">
    <view
      class="u-icon-minus"
      :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
      :style="{
        background: bgColor,
        height: inputHeight + 'rpx',
        color: color,
        fontSize: size + 'rpx',
        minHeight: '1.4em',
      }"
      @click="minus"
    >
      <view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn"
        >－</view
      >
    </view>
    <input
      v-model="inputVal"
      :disabled="disabledInput || disabled"
      :cursor-spacing="getCursorSpacing"
      :class="{ 'u-input-disabled': disabled }"
      class="u-number-input"
      type="number"
      :style="{
        color: color,
        fontSize: size + 'rpx',
        background: bgColor,
        height: inputHeight + 'rpx',
        width: inputWidth + 'rpx',
      }"
      @blur="onBlur"
      @click="showInput = true"
    />
    <view
      class="u-icon-plus"
      :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
      :style="{
        background: bgColor,
        height: inputHeight + 'rpx',
        color: color,
        fontSize: size + 'rpx',
        minHeight: '1.4em',
      }"
      @click="plus"
    >
      <view :style="'font-size:' + (Number(size) + 10) + 'rpx'" class="num-btn"
        >＋</view
      >
    </view>
  </view>
</template>
<script>
/* eslint-disable */
export default {
  name: 'vk-data-input-number-box',
  emits: ['update:modelValue', 'input', 'change', 'blur', 'plus', 'minus'],
  props: {
    // 预显示的数字
    value: {
      type: Number,
      default: 1
    },
    modelValue: {
      type: Number,
      default: 1
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: '#FFFFFF'
    },
    // 最小值
    min: {
      type: Number,
      default: 0
    },
    // 最大值
    max: {
      type: Number,
      default: 99999
    },
    // 步进值，每次加或减的值
    step: {
      type: Number,
      default: 1
    },
    // 步进值，首次增加或最后减的值
    stepFirst: {
      type: Number,
      default: 0
    },
    // 是否禁用加减操作
    disabled: {
      type: Boolean,
      default: false
    },
    // input的字体大小，单位rpx
    size: {
      type: [Number, String],
      default: 26
    },
    // 加减图图标颜色
    color: {
      type: String,
      default: '#323233'
    },
    // input宽度，单位rpx
    inputWidth: {
      type: [Number, String],
      default: 80
    },
    // input高度，单位rpx
    inputHeight: {
      type: [Number, String],
      default: 50
    },
    // index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
    index: {
      type: [Number, String],
      default: ''
    },
    // 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
    // 设置disabled为false，disabledInput为true即可
    disabledInput: {
      type: Boolean,
      default: false
    },
    // 输入框于键盘之间的距离
    cursorSpacing: {
      type: [Number, String],
      default: 100
    },
    // 是否只能输入大于或等于0的整数(正整数)
    positiveInteger: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    valueCom(v1, v2) {
      // 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
      if (!this.changeFromInner) {
        this.inputVal = v1;
        // 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
        // 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
        // 将changeFromInner设置为false
        this.$nextTick(function() {
          this.changeFromInner = false;
        });
      }
    },
    inputVal(v1, v2) {
      // 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
      if (v1 == '') return;
      let value = 0;
      // 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
      let tmp = this.isNumber(v1);
      if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
      else value = v2;
      // 判断是否只能输入大于等于0的整数
      if (this.positiveInteger) {
        // 小于0，或者带有小数点，
        if (v1 < 0 || String(v1).indexOf('.') !== -1) {
          value = v2;
          // 双向绑定input的值，必须要使用$nextTick修改显示的值
          this.$nextTick(() => {
            this.inputVal = v2;
          });
        }
      }
      // 发出change事件
      this.handleChange(value, 'change');
    },
    min(v1) {
      if (v1 !== undefined && v1 != '' && this.valueCom < v1) {
        this.$emit('input', v1);
        this.$emit('update:modelValue', v1);
      }
    },
    max(v1) {
      if (v1 !== undefined && v1 != '' && this.valueCom > v1) {
        this.$emit('input', v1);
        this.$emit('update:modelValue', v1);
      }
    }
  },
  data() {
    return {
      inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
      changeFromInner: false, // 值发生变化，是来自内部还是外部
      innerChangeTimer: null ,// 内部定时器
      showInput:false,
    };
  },
  created() {
    this.inputVal = Number(this.valueCom);
  },
  computed: {
    valueCom() {
      // #ifndef VUE3
      return this.value;
      // #endif

      // #ifdef VUE3
      return this.modelValue;
      // #endif
    },
    getCursorSpacing() {
      // 先将值转为px单位，再转为数值
      return Number(uni.upx2px(this.cursorSpacing));
    }
  },
  methods: {
    // 减
    minus() {
      this.computeVal('minus');
    },
    // 加
    plus() {
      this.computeVal('plus');
    },
    // 为了保证小数相加减出现精度溢出的问题
    calcPlus(num1, num2) {
      let baseNum, baseNum1, baseNum2;
      try {
        baseNum1 = num1.toString().split('.')[1].length;
      } catch (e) {
        baseNum1 = 0;
      }
      try {
        baseNum2 = num2.toString().split('.')[1].length;
      } catch (e) {
        baseNum2 = 0;
      }
      baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
      let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度
      return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
    },
    // 为了保证小数相加减出现精度溢出的问题
    calcMinus(num1, num2) {
      let baseNum, baseNum1, baseNum2;
      try {
        baseNum1 = num1.toString().split('.')[1].length;
      } catch (e) {
        baseNum1 = 0;
      }
      try {
        baseNum2 = num2.toString().split('.')[1].length;
      } catch (e) {
        baseNum2 = 0;
      }
      baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
      let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
      return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
    },
    computeVal(type) {
      uni.hideKeyboard();
      if (this.disabled) return;
      let value = 0;
      // 减
      if (type === 'minus') {
        if (this.stepFirst > 0 && this.inputVal == this.stepFirst) {
          value = this.min;
        } else {
          value = this.calcMinus(this.inputVal, this.step);
        }
      } else if (type === 'plus') {
        if (this.stepFirst > 0 && this.inputVal < this.stepFirst) {
          value = this.stepFirst;
        } else {
          value = this.calcPlus(this.inputVal, this.step);
        }
      }
      if (this.stepStrictly) {
        let strictly = value % this.step;
        if (strictly > 0) {
          value -= strictly;
        }
      }
      if (value > this.max) {
        value = this.max;
      } else if (value < this.min) {
        value = this.min;
      }
      this.inputVal = value;
      this.handleChange(value, type);
    },
    // 处理用户手动输入的情况
    onBlur(event) {
      let val = 0;
      let value = event.detail.value;
      // 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
      // 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
      if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
      val = +value;

      if (this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal > 0) {
        val = this.stepFirst;
      }
      if (this.stepStrictly) {
        let strictly = val % this.step;
        if (strictly > 0) {
          val -= strictly;
        }
      }
      if (val > this.max) {
        val = this.max;
      } else if (val < this.min) {
        val = this.min;
      }
      this.$nextTick(() => {
        this.inputVal = val;
      });
      this.handleChange(val, 'blur');
    },
    handleChange(value, type) {
      if (this.disabled) return;
      // 清除定时器，避免造成混乱
      if (this.innerChangeTimer) {
        clearTimeout(this.innerChangeTimer);
        this.innerChangeTimer = null;
      }
      // 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
      this.changeFromInner = true;
      // 一定时间内，清除changeFromInner标记，否则内部值改变后
      // 外部通过程序修改value值，将会无效
      this.innerChangeTimer = setTimeout(() => {
        this.changeFromInner = false;
      }, 150);
      this.$emit('input', Number(value));
      this.$emit('update:modelValue', Number(value));
      this.$emit(type, {
        // 转为Number类型
        value: Number(value),
        index: this.index
      });
    },
    /**
     * 验证十进制数字
     */
    isNumber(value) {
      return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
    }
  }
};
</script>

<style lang="scss" scoped>
.vk-data-input-number-box {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.u-number-input {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.u-icon-plus,
.u-icon-minus {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.u-icon-plus {
  border-radius: 50%;
  background-color: rgba(129, 203, 240, 0.5) !important;
}

.u-icon-minus {
  border-radius: 50%;
  background-color: rgb(129, 240, 205, 0.3) !important;
}

.u-icon-disabled {
  color: #c8c9cc !important;
  background-color: #f2f3f5 !important;
}

.u-input-disabled {
  color: #c8c9cc !important;
  background-color: #f2f3f5 !important;
}
.num-btn {
}
</style>
